<template>
  <div class="chat_transfer" @mouseover="showTip" @mouseout="hideTip" v-if="webchatData.status === 'finish' && !webchatData.leavemsg">
    <!-- 已评分 -->
    <el-tooltip class="item" :content="$t('webchat.alreadyQc')" placement="bottom" v-if="webchatData.quality_grade && webchatData.QUALITY_GRADE != ''" :manual="true" :value="show">
      <el-button type="text" class="iconfont icon-tijiaozhijian_yitijiaozhijianbingpingfen" size="mini"></el-button>
    </el-tooltip>
    <!-- 提交质检 -->
    <el-tooltip class="item" :content="$t('webchat.submitQc')" placement="bottom" v-else-if="!webchatData.applyQcWebchat" :manual="true" :value="show">
      <el-button type="text" class="iconfont icon-tijiaozhijian_weitijiaozhijian" size="mini" @click.stop="checkUpIcon"></el-button>
    </el-tooltip>
    <!-- 撤回质检 -->
    <el-tooltip class="item" :content="$t('webchat.revokeQc')" placement="bottom" v-else-if="webchatData.applyQcWebchat" :manual="true" :value="show">
      <el-button type="text" class="iconfont icon-tijiaozhijian_yitijiaozhijianweipingfen" size="mini" @click.stop="withDrawCheckUpIcon"></el-button>
    </el-tooltip>
    <button style="display:none" id="noClick"></button>
  </div>
</template>
<script>
/**
 * 坐席主动提交质检组件
 */
import * as types from '@/store/modules/webchat/mutation-types.js'
export default {
  name: 'submitQc',
  props: ['webchatData'],
  watch: {
    webchatData(val) {
      console.log('==============', val)
    }
  },
  data () {
    return {
      show: false
    }
  },
  methods: {
    // 修复tooltip的展示问题，改位手动展示
    showTip () {
      this.show = true
    },
    hideTip () {
      this.show = false
    },
    // 主动提交质检功能
    checkUpIcon () {
      this.$confirm(this.$t('webchat.submitChatConfirm'), this.$t('public.tip'), {
        confirmButtonText: this.$t('public.confirm'),
        cancelButtonText: this.$t('public.cancel'),
        cancelButtonClass: 'primary_btn',
        confirmButtonClass: 'primary_btn',
        type: 'warning'
      }).then(() => {
        this.commitCheckUp()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('webchat.submitChatCancel')
        })
      })
    },
    commitCheckUp () {
      this.$store.dispatch('commitCheckUp', {_id: this.webchatData._id, sid: this.webchatData.sid}).then(res =>{
        if (res.success) {
          this.$store.commit(types.UPDATE_CHECKUP_STATUS, {_id: this.webchatData._id, status: true})
          this.$message({
            type: 'success',
            message: this.$t('webchat.submitChatSuccess')
          })
        } else {
          this.$message({
            type: 'error',
            message: res.message || this.$t('webchat.submitChatFail')
          })
        }
        this.resetState()
      })
    },
    // 撤回质检
    withDrawCheckUpIcon () {
      this.$confirm(this.$t('webchat.revokeChatConfirm'), this.$t('public.tip'), {
        confirmButtonText: this.$t('public.confirm'),
        cancelButtonText: this.$t('public.cancel'),
        cancelButtonClass: 'primary_btn',
        confirmButtonClass: 'primary_btn',
        type: 'warning'
      }).then(() => {
        this.withDrawCheckUp()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('webchat.revokeChatCancel')
        })
      })
      this.$nextTick(() => {
        document.getElementById("noClick").click()
      })
    },
    withDrawCheckUp () {
      this.$store.dispatch('withDrawCheckUp', {_id: this.webchatData._id, sid: this.webchatData.sid}).then(res =>{
        if (res.success) {
          this.$store.commit(types.UPDATE_CHECKUP_STATUS, {_id: this.webchatData._id, status: false})
          this.$message({
            type: 'success',
            message: this.$t('webchat.revokeChatSuccess')
          })
        } else {
          this.$message({
            type: 'error',
            message: res.message || this.$t('webchat.revokeChatFail')
          })
        }
        this.resetState()
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
  @import "./style/webchatCon.styl"
</style>
